import G6 from "@antv/g6";
export const useToolbar = () => {
  const toolbar = new G6.ToolBar({
    className: "g6-toolbar-ul",
    getContent: () => {
      return `
        <ul id='g6Toolbar'>
          <li code='addNode' class='iconfont icon-jiahao' id='addNode'></li>
          <li code='addEdge' class='iconfont icon-zhixian' id='addEdge'></li>
        </ul>
      `;
    },
    handleClick: (code, graph) => {
      toolbarHighlight(code);
      if (code === "addNode") {
        // let li = document.querySelector("#addNode");
        // li?.classList.remove("active");
        // console.log("节点1", li);
      } else if (code === "addEdge") {
        console.log("节点1", code);
      } else if (code === "undo") {
        toolbar.undo();
      } else if (code === "redo") {
        toolbar.redo();
      }
    }
  });
  return toolbar;
};

//工具栏点击高亮
function toolbarHighlight(code) {
  let NodeList = document.querySelectorAll("#g6Toolbar li");
  NodeList?.forEach((li) => {
    li.classList.contains("active") && li.classList.remove("active");
    if (code == li.id) {
      li.classList.add("active");
    }
  });
}